$(document).ready(function(){
		var pincel=new Array;
		var objeto_actual=null;
		var objeto_escucha=null;
		var ctxa=null;
		var ctxb=null;
		var ctxc=null;
		var ctxd=null;
		var id_cnv;
		var destino=document.getElementById("perfil");
		var dataUrl_cnv;
		//Recibo objeto
		
		if(localStorage.length===0)
		{
			dibuja_cnv();
		}
		else
		{
		//var value=new Array();	
		/*for(var m=0;m<localStorage.length;m++)
		{
			value[m]=localStorage.key(m);
		}*/
                var localStorageKeys=Object.keys(localStorage);
                localStorageKeys.sort();
		if(window.localStorage.getItem('2')=="Hombre")
		{
			$("body").css("background","-moz-linear-gradient(left, tomato 20%, white 60%, black 100%)");
			$("body").css("background","-webkit-linear-gradient(left, tomato 20%, white 60%, black 100%)");
			$("body").css("background","-ms-linear-gradient(left, tomato 20%, white 60%, black 100%)");
		}
		else
		{
			$("body").css("background","-moz-linear-gradient(left, pink 20%, #656DC1 60%, yellow 100%)");
			$("body").css("background","-webkit-linear-gradient(left, pink 20%, #656DC1 60%, yellow 100%)");
			$("body").css("background","-ms-linear-gradient(left, pink 20%, #656DC1 60%, yellow 100%)");	
		}	
		$("#login").html("");
		var cont='<div id="image_sesion"><img id="cnv-usr" ></div>'+
		'<div id="datos_usr"><h2 id="welc">¡Bienvenido!</h2>'+
		'<p id="nombre_usuario">'+
		window.localStorage.getItem('1')+
		'</p><button id="clear">Cerrar Sesión</button></div>';
		$("#login").html(cont);
		var image_cnv=document.getElementById("cnv-usr");
			image_cnv.src=window.localStorage.getItem('3');
		$("#login").css({"height":"155px","margin-top":"50px","margin-right":"10px"});	
		$("#welc").css("text-align","center");
		$("#clear").css("margin-left","27%");	
		$("#nombre_usuario").css({"font-size":"16pt","margin-top": "-10px",
		"text-align": "center"});	
		$("#image_sesion").css({"float":"left","margin-top":"20px","height":"100px","width": "100px","border-style":"none"});
		$("#datos_usr").css({"float" :"left", "width": "255px","height":"120px","border-style":"none"});
		//$("#login img").css({"margin-left": "40%","margin-top" :"10%"});
			
			
		}	
	function dibuja_cnv()
	{		
	for(var i=1;i<=4;i++)
	{
			pincel[i]=document.getElementById("cnv-forma-"+i);
	}
		//Verifica contexto

	if(pincel[1].getContext)
	{
		ctxa = pincel[1].getContext("2d");
	}
	if(pincel[2].getContext)
	{
		ctxb = pincel[2].getContext("2d");
	}
	if(pincel[3].getContext)
	{
		ctxc = pincel[3].getContext("2d");
	}
	if(pincel[4].getContext)
	{
		ctxd = pincel[4].getContext("2d");
	}
	
	//A continuación se cargarán y dibujaran las imágenes.
	
	var img1=new Image();
	img1.src='./imagenes/logo_ferrari.jpg';
	var img2=new Image();
	img2.src='./imagenes/lotus_f1.jpg';
	var img3=new Image();
	img3.src='./imagenes/Red_Bull_Racing.jpg';
	img1.onload=function()
	{
		ctxa.drawImage(img1,0,0,pincel[1].width,pincel[1].height);
	};
	img2.onload=function()
	{
		ctxb.drawImage(img2,0,0,pincel[2].width,pincel[2].height);
	};

	img3.onload=function()
	{
		ctxc.drawImage(img3,0,0,pincel[3].width,pincel[3].height);
	};
	escucha_eventos();
	}
	//Inicia drag and drop
	function escucha_eventos()
		{
			var destino=document.getElementById("perfil");
			console.log('escucha');
			for(var j=1;j<=3;j++)//se inicia con la escucha de eventos
			{
				objeto_escucha=document.getElementById(j);
				objeto_escucha.addEventListener("dragstart", startDrag,false);
				destino.addEventListener("dragcenter", function (e){e.preventDefault();},false);
				destino.addEventListener("dragover", overDrag,false);
				destino.addEventListener("drop",startDrop,false);
			}
		}

	function startDrag(e)
	{
		objeto_actual=this;
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData("Text",e.target.id);
		console.log('start');
	}
	function overDrag(e)
	{
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
		console.log('over');
	}
	
	function startDrop(e)
	{
		e.preventDefault();
		console.log('drop');
		var nuevo=objeto_actual.firstElementChild;
		var canvas_elegido=e.dataTransfer.getData("Text");
		if($('#perfil canvas:first-child').attr('id')=='cnv-forma-4')
		{	
		objeto_actual.removeChild(nuevo);
		objeto_actual.appendChild(this.firstElementChild)
		this.appendChild(nuevo);
		redibuja_cnv(canvas_elegido);
		}


	}
	function redibuja_cnv(cnv_id)
	{
		if(cnv_id=='1')
		{

			var pin=document.getElementById("cnv-forma-1");
			var ctxa=pin.getContext("2d");
			var img4=new Image();
			img4.src='./imagenes/logo_ferrari.jpg';
			img4.onload=function()
			{	
			ctxd.drawImage(img4,0,0,pincel[4].width,pincel[4].height);
			ctxa.beginPath();
			ctxa.save();
			ctxa.clearRect(0,0,pin.width,pin.height);
			ctxa.arc(pin.width/2,pin.height/2,50,0,Math.PI*2);
			ctxa.clip();
			ctxa.drawImage(img4,0,0,pincel[4].width,pincel[4].height);
			ctxa.stroke();
			ctxa.closePath();
			$("#perfil .cnv_perfil").css("border-style","none");
			dataUrl_cnv=pincel[1].toDataURL();
			};
			
		}else if(cnv_id=='2')
		{
			var pin=document.getElementById("cnv-forma-2");
			var ctxb=pin.getContext("2d");
			var img4=new Image();
			img4.src='./imagenes/lotus_f1.jpg';
			img4.onload=function()
			{	
			ctxd.drawImage(img4,0,0,pincel[4].width,pincel[4].height);
			ctxb.beginPath();
			ctxb.save();
			ctxb.clearRect(0,0,pin.width,pin.height);
			ctxb.arc(pin.width/2,pin.height/2,50,0,Math.PI*2);
			ctxb.clip();
			ctxb.drawImage(img4,0,0,pincel[4].width,pincel[4].height);
			ctxb.stroke();
			ctxb.closePath();
			$("#perfil .cnv_perfil").css("border-style","none");
			dataUrl_cnv=pincel[2].toDataURL();
			};
		}else if(cnv_id=='3')
		{
			var pin=document.getElementById("cnv-forma-2");
			var ctxb=pin.getContext("2d");
			var img4=new Image();
			img4.src='./imagenes/Red_Bull_Racing.jpg';
			img4.onload=function()
			{	
			ctxd.drawImage(img4,0,0,pincel[4].width,pincel[4].height);
			ctxc.beginPath();
			ctxc.save();
			ctxc.clearRect(0,0,pin.width,pin.height);
			ctxc.arc(pin.width/2,pin.height/2,50,0,Math.PI*2);
			ctxc.clip();
			ctxc.drawImage(img4,0,0,pincel[4].width,pincel[4].height);
			ctxc.stroke();
			ctxc.closePath();
			$("#perfil .cnv_perfil").css("border-style","none");
			dataUrl_cnv=pincel[3].toDataURL();
			};	
		}
		id_cnv=$('#perfil canvas:first-child').attr('id');


	}

	$("#save").click(function(){
		var nombre="";
		var v_radio="";
		var valor_cnv="";
		nombre=$("#n_usr").val();
		v_radio=$("input[name='genero']:checked").val();
		if(nombre!=="")
		{
			window.localStorage.setItem('1',nombre);
			window.localStorage.setItem('2',v_radio);
			window.localStorage.setItem('3',dataUrl_cnv);
			$("#mensaje_registro").html("");
			$("#mensaje_registro").css("color","red");
			$("#mensaje_registro").css("font-size","15.5px");
			$("#mensaje_registro").html("Datos guardados, actualiza para iniciar tu sesión");
		}

	});
	$("#clear").click(function(){
			
		window.localStorage.clear();
		$("#login").css({"font-size" : "17pt", "text-align" : "center"});
		$("#login").html("<p>'Tu sesión se ha cerrado'</p>");
		$("#login p").css("margin-top","15%");

	});	
		
	});


